<template>
    <!-- PV折线图容器 -->
    <div id="lineChat" class="overflow-x-auto w-full h-60"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { watch } from 'vue'

// 对外暴露的属性值
const props = defineProps({
    value: { // 属性值名称
        type: Object, // 类型为对象
        default: null // 默认为null
    }
})

// 初始化折线图
function initLineChat() {
    var chartDom = document.getElementById('lineChat');
    var myChart = echarts.init(chartDom);
    var option;

    // 从props.value中获取日期集合和pv访问量集合
    const pvDates = props.value.pvDates
    const pvCounts = props.value.pvCounts

    option = {
        xAxis: {
            type: 'category',
            data: pvDates // x轴数据
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: pvCounts, // 设置pv访问量
                type: 'line'
            }
        ]
    };

    // 移动到折点上，显示数值
    option.tooltip = { trigger: 'axis' }

    option && myChart.setOption(option);
}

// 监听属性，监听props.value的变化，一旦props.value发生变化，就调用initLineChat初始化折线图
watch(() => props.value, () => initLineChat())
</script>